import React, { Component } from 'react'
import classnames from 'classnames'
import Polygon from 'map/Polygon'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import Content from './setting/Content'
import Field from './myField/Field'
import KML from './options/KML'
import {
  addDragDrop
} from '_redux/actions/dragDrops.js'
import Input from './options/Input'
import user_img from 'images/common/user.png'
import 'css/index/common/user.scss'
import history from 'router/history'
import Cookies from 'js-cookie'
import filed from 'images/feature/filed.png'
import setting from 'images/feature/setting.png'
import myfields from 'images/feature/myfields.png'
import remind from 'images/feature/remind.png'
import service from 'images/feature/service.png'
import loginout from 'images/feature/loginout.png'
import kml from 'images/feature/kml.png'
import hand from 'images/feature/hand.png'
import latlon from 'images/feature/latlon.png'

class User extends Component {
  constructor(props) {
    super(props)
    this.state = {
      hiden: true,
      messCount: 0,
      clear: false,
      setting: false,
      myfield: false,
      draw: false,
      createField: false,
      kml: false
    }
    this.showFeature = this.showFeature.bind(this)
    this.addField = this.addField.bind(this)
    this.loginout = this.loginout.bind(this)
  }
  showFeature() {
    this.setState({
      hiden: !this.state.hiden
    })
  }
  addField() {
    if (this.state.draw) {
      return
    }
    this.setState({
      hiden: true,
      draw: true
    })
  }

  loginout() {
    sessionStorage.clear()
    Cookies.remove('name', { path: '' })
    history.push('/')
  }

  showSetting = () => {
    this.props.addDragDrop({
      id: 'content',
      title: '设置',
      children: Content,
      position: { x: -600 / 2, y: -384 / 2 }
    })
  }
  showMyField = () => {
    this.props.addDragDrop({
      id: 'field',
      title: '我的田地',
      children: Field,
      style: {
        right: '32px',
        left: 'unset',
        top: '25%',
      }
    })
    // this.setState({
    //   hiden: true,
    //   myfield: true
    // })
  }
  myfieldClose = () => {
    this.setState({
      myfield: false
    })
  }
  onRef = (ref) => {
    this.child = ref
  }
  removeDraw = () => {
    if (!this.state.draw) {
      return
    }
    this.setState({
      draw: false
    })
  }
  createFieldClose = () => {
    this.setState({
      // hiden: true,
      createField: false
    })
  }
  activeInput = () => {
    this.props.addDragDrop({
      id: 'input',
      title: '输入坐标创建田地',
      children: Input,
      style: {
        right: '32px',
        left: 'unset',
        top: '25%',
      }
    })
  }
  addKML = () => {
    this.setState({
      kml: true,
      hiden: true,
    })
  }
  removeKML = () => {
    this.setState({
      kml: false,
    })
  }
  render() {
    const { user } = this.props
    return (
      <div className='user'>
        <div className='feature'>
          <div className='user-img' onClick={this.showFeature} style={{ backgroundImage: `url(${user.icon || user_img})` }}></div>
          {this.state.messCount !== 0 && <span className='user-message mess-abosulte'>{this.state.messCount}</span>}
          {this.state.kml && <KML map={this.props.map.map} removeKML={this.removeKML} />}
          <div className={classnames({
            'user-feature': true,
            'hiden': this.state.hiden
          })}>
            <ul>
              <li className='add-field'>
                <img src={filed} alt="" />
                <label>新建田地</label>
                <ul className='second'>
                  <li onClick={this.addField}>
                    <img src={hand} alt="" />
                    <label>手动框选</label>
                    <Polygon
                      onRef={this.onRef}
                      draw={this.state.draw} removeDraw={this.removeDraw}></Polygon>
                  </li>
                  <li onClick={this.activeInput}>
                    <img src={latlon} alt="" />
                    <label >输入坐标</label>
                  </li>
                  <li onClick={this.addKML}>
                    <img src={kml} alt="" />
                    <label >导入KML</label>
                  </li>
                </ul>
              </li>
              <li>
                <img src={myfields} alt="" />
                <label onClick={this.showMyField}>我的田地</label>
              </li>
              <li>
                <img src={setting} alt="" />
                <label onClick={this.showSetting}>设&emsp;&emsp;置</label>
              </li>

              <li>
                <img src={remind} alt="" />
                <label>提&emsp;&emsp;醒</label>
                {this.state.messCount !== 0 && <span className='user-message'>{this.state.messCount}</span>}
              </li>

              <li>
                <img src={service} alt="" />
                <label>客&emsp;&emsp;服</label>
              </li>

              <li>
                <img src={loginout} alt="" />
                <label onClick={this.loginout}>退&emsp;&emsp;出</label>
              </li>
            </ul>
          </div>
        </div>
      </div>
    )
  }
}
User.propTypes = {
  addDragDrop: PropTypes.func,
  user: PropTypes.object,
  map: PropTypes.object
}

export default connect(({ user, map }) => ({
  user,
  map,
}), dispatch => ({
  addDragDrop: (children) => dispatch(addDragDrop(children)),
}))(User)